<template>
    <div id="app" class="hot-page" :class="{'page-loading':page.loading}">
        <scroll-fixed>
            <page-bar>
                <div class="top-header" slot="middle">
                    <p>热点精选</p>
                    <span v-if="page.header_time">实时更新于{{page.header_time}}</span>
                </div>
                <i slot="right"></i>
            </page-bar>
        </scroll-fixed>
        <ui-loading v-if="page.loading" />
        <page-error v-else-if="page.is_end && list.length == 0">
            <div slot="logo">
                <img src="../assets/page-empty.png" class="logo">
            </div>
            <div slot="text">
                <p class="text">暂无内容</p>
            </div>
        </page-error>
        <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>
        <scroll-list v-else class="ui-list" :disabled="true" :config="scroll" @bottom="loadmore">
            <ui-item v-for="item in list" :item="item" :key="item.id"
                :params="player" 
                @playVideo="playVideo"
                @volumechange="volumeChange"
            ></ui-item>
        </scroll-list><!-- en dui-list -->
        <slide-tool ref="slide" />
        <offline />
    </div>
</template>
<script>
import Items from "../components/items.vue";
import pageBar from "../components/pagebar.vue";
import scrollFixed from "../components/scrollFixed.vue";
import ScrollList from "../components/scrollList.vue";
import UILoading from "../components/loading.vue";
import pageError from "../components/pageError.vue";
import offline from "../components/offline.vue";

import mxPlayer from '../mixins/inlinePlayer.js'
import mxSlide from "../mixins/slide.js";
export default {
    name: "hot",
    components: {
        [ScrollList.name]: ScrollList,
        [Items.name]: Items,
        [pageBar.name]: pageBar,
        [scrollFixed.name]: scrollFixed,
        [UILoading.name]: UILoading,
        [pageError.name]: pageError,
        [offline.name]: offline
    },
    mixins: [mxPlayer,mxSlide],
    data() {
        return {
            page: {
                channel_id: "",
                page_no: 1,
                is_end: false,
                loading: true,
                header_time: ""
            },
            pageError: false,
            list: [],
            scroll: {
                bottom: false
            }
        };
    },
    mounted() {
        this.$on("pageRefresh", isClean => {
            this.page.page_no = 1;
            this.page.loading = true;
            this.loadPage(isClean)
                .then(rs => {
                    this.$nextTick().then(()=>{
                        this.scroll.bottom = this.list.length == 0 ? 'hidden' : (this.page.is_end ?  'done' : false);
                    })
                })
                .catch(e => {
                    this.pageError = true;
                })
                .finally(() => {
                    this.page.header_time = this.$moment().format("hh:mm");
                    this.page.loading = false;
                });
        });
        let parse = this.$utils.urlFactory.parse(location.search);
        if (parse && parse.id && !isNaN(parse.id)) {
            this.page.channel_id = parse.id;
            this.$emit("pageRefresh", true);
        } else {
            this.$emit("pageRefresh", true);
        }
    },
    methods: {
        loadPage(needClean) {
            let url =
                "?ct=news&ac=hot_list&page_no=" + this.page.page_no;
            // if (this.page.channel_id !== "")
            //     url += "&channel_id=" + this.page.channel_id;
            return this.$http.get(url).then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let rs = data.data;
                        this.page.is_end = !rs.is_have_data;

                        let list = [];
                        data.data.list.forEach(item => {
                            if (this.$utils.unlike.check(item.id)) return;
                            if(item.style_num == 6) return;
                            let tmpItem = item;
                            tmpItem.url = item.detail_url;
                            tmpItem.type = 'normal'
                            if (tmpItem.type !== "grid") {
                                tmpItem.src = item.cover_img[0];
                            } else {
                                tmpItem.src = item.cover_img;
                            }

                            if(tmpItem.type == 'video'){
                                tmpItem.play_status = 0;
                            }

                            tmpItem.view = item.browse_total;
                            // tmpItem.time = this.$moment(item.issue_time * 1000)
                            //     .fromNow()
                            //     .replace(" ", "");

                            list.push(tmpItem);
                        });

                        if (!needClean) {
                            let savelist = [];
                            list.forEach(item=>{
                                item.is_top = 0;
                                item.is_hot = 0;
                                savelist.push(item); 
                            })
                            this.list = this.list.concat(savelist);
                        } else {
                            list.forEach(item=>{
                                item.is_top = 0;
                                item.is_hot = 0;
                            })
                            this.list = list;
                        }
                        this.page.page_no++;
                    } else {
                        let co = this.$toast(data.msg);
                        if (data.code == 5003 || data.code == 5004) {
                            co.then(() => {
                                history.back();
                            });
                        }
                        throw new Error(data.msg);
                    }
                })
                .catch(e => {
                    this.$toast(e);
                    throw e;
                });
        },
        pullLoad(cb) {
            /**
             * 目前需求是点击刷新按钮，干掉现有列表，重新获取第一页的数据
             */
            this.$emit('pageRefresh',true);
        },
        pageRefresh() {
            this.pageError = false;
            this.$emit("pageRefresh", true);
        },
        loadmore() {
            if (this.scroll.bottom || this.page.is_end) return false;
            this.scroll.bottom = true;
            this.loadPage().finally(() => {
                this.$nextTick(() => {
                     this.$nextTick().then(()=>{
                        this.scroll.bottom = this.page.is_end ?  'done' : false;
                    })
                });
            });
        }
    }
};
</script>
<style lang="less">
.hot-page {
    .sticky .page-bar {
        height: 82px;
    }
    .page-bar {
        height:auto;
        
        .page-bar-left {
            transition: all 0.2s;
            height: 82px;
            align-self: flex-start;
        }
    }
    
    .top-header {
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 1;
        padding-top: 68px;
        padding-bottom: 30px;

        p {
            position: relative;
            font-size: 36px;
            color: #282828;
            font-weight: bold;

            &::after,
            &::before {
                content: "";
                position: absolute;
                top: 50%;
                height: 2px;
                width: 20px;
                background-color: #000;
                transform: translateY(-50%);
            }

            &::before {
                left: -30px;
            }
            &::after {
                right: -30px;
            }
        }

        span {
            margin-top: 18px;
            font-size: 20px;
            color: #919191;
        }
    }

    .sticky {
        .page-bar {
            border-bottom: 1px solid #efefef;
        }
        .top-header {
            padding-top: 14px;
            padding-bottom: 14px;
            p {
                font-size: 34px;
                font-weight: normal;

                &::before,
                &::after {
                    display: none;
                }
            }
            span {
                margin-top: 10px;
            }
        }
    }
}
</style>


